<template>
  <div class="comments-page">
    <h3>评论区</h3>

    <!-- 展示评论 -->
    <div v-if="carComments.length > 0">
      <div v-for="(comment, index) in displayedComments" :key="index" class="comment-item">
        <div class="comment-header">
          <span class="username">{{ comment.username }}</span>
          <span class="date">{{ comment.time }}</span>
        </div>
        <div class="comment-body">
          <p>{{ comment.comment_text }}</p>
        </div>

        <!-- 显示回复区 -->
        <div v-if="comment.showReplySection" class="reply-section">
          <textarea v-model="replyText[comment.id]" placeholder="回复此评论..." rows="3"></textarea>
          <button @click="submitReply(comment)">回复</button>
        </div>

        <!-- 始终显示回复按钮 -->
<!--        <button @click="toggleReplyButton(comment)" v-if="!comment.showReplySection">回复</button>-->
      </div>

      <!-- "未展示更多"按钮 -->
      <button v-if="showMoreButton" @click="showAllComments">
        展开全部评论
      </button>
    </div>
    <div v-else>
      <p>暂无评论。</p>
    </div>

    <!-- 添加新评论 -->
    <div class="new-comment">
      <textarea v-model="newCommentText" placeholder="写下你的评论..." rows="3"></textarea>
      <button @click="submitNewComment">发布评论</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    vehicleId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      currentUserId: 1,  // 假设当前用户的 ID 为 1，可以从登录系统中获取
      carComments: [],
      displayedComments: [],
      showMoreButton: false,
      commentsLimit: 5,
      newCommentText: '',
      replyText: {},
    };
  },
  mounted() {
    this.fetchComments(this.$route.params.vehicleId);
  },
  methods: {
    fetchComments(vehicleId) {
      console.log(111,this.vehicleId)
      // 模拟从后端获取数据
      const commentsData = [
          { id: 1, user_id: 1, vehicle_id: 2, comment_text: '这辆车非常不错，驾驶体验很好！', rating: 5, parent_comment_id: null, time: '2025-10-11' },
          { id: 2, user_id: 2, vehicle_id: 2, comment_text: '确实很舒适，但是油耗有点高。', rating: 3, parent_comment_id: null, time: '2025-10-11' },
          { id: 3, user_id: 3, vehicle_id: 2, comment_text: '我很喜欢这款车，尤其是内饰设计。', rating: 4, parent_comment_id: 1, replyText: '我也这么觉得，内饰很精致。', time: '2025-10-11'},
          { id: 4, user_id: 4, vehicle_id: 3, comment_text: '租了一辆车，服务很好，车况也不错，推荐！', rating: 4, parent_comment_id: null, time: '2025-10-11'},
          { id: 5, user_id: 1, vehicle_id: 3, comment_text: '服务一般，车辆清洁度不高，差评！', rating: 2, parent_comment_id: null, time: '2025-10-11'},
          { id: 6, user_id: 2, vehicle_id: 2, comment_text: '驾驶体验非常流畅，车身稳重。', rating: 5, parent_comment_id: null, time: '2025-10-11' }
        ]
      ;

      // 获取对应车辆的评论
      this.carComments = commentsData || [];

      // 只展示前5条评论
      this.displayedComments = this.carComments.slice(0, this.commentsLimit);
      if (this.carComments.length > this.commentsLimit) {
        this.showMoreButton = true;
      }
    },

    // 切换回复框的显示状态
    toggleReplyButton(comment) {
      comment.showReplySection = !comment.showReplySection;  // 切换回复框显示状态
    },

    // 提交回复
    submitReply(comment) {
      const reply = this.replyText[comment.id];
      if (reply) {
        // 假设回复是通过 API 存储
        const replyData = {
          user_id: this.currentUserId,
          vehicle_id: comment.vehicle_id,
          comment_text: reply,
          rating: 5,  // 默认5星
          parent_comment_id: comment.id,
          time: '2025-10-11'
        };

        // 将回复添加到评论的回复列表
        const originalComment = this.carComments.find(c => c.id === comment.id);
        if (originalComment) {
          originalComment.replies.push(replyData);
        }

        this.replyText[comment.id] = '';  // 清空回复框
        comment.showReplySection = false; // 隐藏回复框
      }
    },

    // 提交新的评论
    submitNewComment() {
      if (this.newCommentText) {
        const newComment = {
          id: Date.now(), // 使用当前时间戳作为唯一ID，实际中应该通过后端生成ID
          user_id: this.currentUserId,
          vehicle_id: this.$route.params.vehicleId,
          comment_text: this.newCommentText,
          rating: 5,  // 默认5星
          parent_comment_id: null,
          time: '2025-10-11',
          replies: [], // 新评论没有回复
          showReplySection: false  // 新评论默认不显示回复框
        };

        // 假设评论是通过 API 存储
        this.carComments.push(newComment);
        this.newCommentText = '';  // 清空评论框

        // 只展示前5条评论
        if (this.carComments.length <= this.commentsLimit) {
          this.displayedComments.push(newComment);
        }
      }
    },

    showAllComments() {
      // 显示所有评论
      this.displayedComments = this.carComments;
      this.showMoreButton = false;
    }
  }
};
</script>

<style scoped>
.comments-page {
  font-family: Arial, sans-serif;
  padding: 20px;
}

h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.comment-item {
  background-color: #f9f9f9;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #555;
}

.comment-body {
  margin-top: 10px;
  font-size: 16px;
}

.reply-section {
  margin-top: 15px;
}

textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

.new-comment {
  margin-top: 30px;
}

.new-comment textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
